material ui Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. 해결하기 위 문장이 답을 포함하고 있다. <div> 요소는 <p> 태그의 자식 태그로 들어갈 수 없다는 말이다. <p> 는 인라인 요소이고, <div> 는 블록 요소이므로 인라인 요소 안에 블록 요소가 들어감으로써 이런 경고를 띄우는 것이다. 어디의 코드에서 <div> 가 <p> 안에 들어가있는지 찾기가 막막할 수 있다. 하지만 콘솔은 그 힌트까지 주고 있다. 콘솔창의 경고를 더 키워서 보면 위에서부... errormaterial uierror MUI 페이지네이션 적용 방법 + 후기 구글에서 지원하는 material ui (이하 mui)에는 다양한 UI 라이브러리들이 존재합니다. 저의 경우에는 Modal, Dialog, Pagination, Skeleton 등을 주로 잘 사용하고 있습니다. 그 중에서 Pagination에 대해 말하고자 합니다. 페이지네이션은 보통 위와 같은 형태로 데이터를 한꺼번에 불러오지 않고 일부분만 가져올 때에 사용됩니다. 이를 위해선 API를 호... mui페이지네이션material uimaterial ui TIL35, 오늘 마주친 버그 오늘 마주친 버그들 로그. 머테리얼 유아이에서 Linear Progress Bar를 사용하면서, 커스텀 스타일링을 적용하기 위해 위와 같이 코드를 작성하였다. 로컬 작업환경에서 의도한대로 스타일링이 부여되는 것을 확인한 뒤, 배포를 하였다. 그런데 왠걸, 실제 product에서는 내가 의도한 것과는 다르게 스타일링이 부여되는 것을 확인하였다. 좀 더 정확한 진단을 위해서, 개발자 도구에서 스... TILmaterial uiTIL [React] 직접 구현한 Pagination 컴포넌트를 Material-UI 라이브러리로 변환하기 숙소 리스트 페이지에서 직접 제작한 페이지네이션 부분을 Material-UI 를 사용하여 바꾸어보았다. 자식 컴포넌트인 페이지 버튼에 을 적용하여, 이벤트 타겟으로 해당 데이터셋에 접근하여 페이지를 이동시켰다. 자식 컴포넌트인 페이지 버튼 컴포넌트는 리액트 훅과 Styled-component로 작성했다. 기존 코드에서 딱히 단점은 없고 기능도 정상적으로 작동하지만 아쉬운 점이 있다면 한 페이... 리액트위코드WeCode라이브러리material uiWeCode Material-UI에서 Style을 적용하는 방법 그런데 또 회사에서 요구하는 요구사항도 커버를 해야하기때문에 해보지 못했던 Typescript와 Next.js 그리고 Material-UI로 작업을 하고 있는데 쉽지가 않은 상황인 것 같다. 아무튼 시작하기전에 얘기가 길었는데 오늘은 요즘 내가 쓰고 있는 Material-UI의 style을 쓰는 방법이 styled-component와 비슷하면서도 좀 달라서 블로그에 적어놓으면 좋을 것 같아서... Reactmaterial uiReact
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. 해결하기 위 문장이 답을 포함하고 있다. <div> 요소는 <p> 태그의 자식 태그로 들어갈 수 없다는 말이다. <p> 는 인라인 요소이고, <div> 는 블록 요소이므로 인라인 요소 안에 블록 요소가 들어감으로써 이런 경고를 띄우는 것이다. 어디의 코드에서 <div> 가 <p> 안에 들어가있는지 찾기가 막막할 수 있다. 하지만 콘솔은 그 힌트까지 주고 있다. 콘솔창의 경고를 더 키워서 보면 위에서부... errormaterial uierror MUI 페이지네이션 적용 방법 + 후기 구글에서 지원하는 material ui (이하 mui)에는 다양한 UI 라이브러리들이 존재합니다. 저의 경우에는 Modal, Dialog, Pagination, Skeleton 등을 주로 잘 사용하고 있습니다. 그 중에서 Pagination에 대해 말하고자 합니다. 페이지네이션은 보통 위와 같은 형태로 데이터를 한꺼번에 불러오지 않고 일부분만 가져올 때에 사용됩니다. 이를 위해선 API를 호... mui페이지네이션material uimaterial ui TIL35, 오늘 마주친 버그 오늘 마주친 버그들 로그. 머테리얼 유아이에서 Linear Progress Bar를 사용하면서, 커스텀 스타일링을 적용하기 위해 위와 같이 코드를 작성하였다. 로컬 작업환경에서 의도한대로 스타일링이 부여되는 것을 확인한 뒤, 배포를 하였다. 그런데 왠걸, 실제 product에서는 내가 의도한 것과는 다르게 스타일링이 부여되는 것을 확인하였다. 좀 더 정확한 진단을 위해서, 개발자 도구에서 스... TILmaterial uiTIL [React] 직접 구현한 Pagination 컴포넌트를 Material-UI 라이브러리로 변환하기 숙소 리스트 페이지에서 직접 제작한 페이지네이션 부분을 Material-UI 를 사용하여 바꾸어보았다. 자식 컴포넌트인 페이지 버튼에 을 적용하여, 이벤트 타겟으로 해당 데이터셋에 접근하여 페이지를 이동시켰다. 자식 컴포넌트인 페이지 버튼 컴포넌트는 리액트 훅과 Styled-component로 작성했다. 기존 코드에서 딱히 단점은 없고 기능도 정상적으로 작동하지만 아쉬운 점이 있다면 한 페이... 리액트위코드WeCode라이브러리material uiWeCode Material-UI에서 Style을 적용하는 방법 그런데 또 회사에서 요구하는 요구사항도 커버를 해야하기때문에 해보지 못했던 Typescript와 Next.js 그리고 Material-UI로 작업을 하고 있는데 쉽지가 않은 상황인 것 같다. 아무튼 시작하기전에 얘기가 길었는데 오늘은 요즘 내가 쓰고 있는 Material-UI의 style을 쓰는 방법이 styled-component와 비슷하면서도 좀 달라서 블로그에 적어놓으면 좋을 것 같아서... Reactmaterial uiReact